/* * @Author: gpj * @Date: 2023-06-10 10:31:21 * @LastEditors: Yejing * @LastEditTime: 2023-06-24 16:40:10 * @Description: desc */
<template>
	<view class="modify-page">
		<c-layout>
			<!-- 头部 -->
			<c-navigation-bar
				:title="search.title"
				:navType="search.navType"
				:navPlaceholder="search.navPlaceholder"
				@backEvent="goBack"
				:navThmen="search.navThmen"
			></c-navigation-bar>

			<!-- 修改 -->
			<view class="container-box form-modify">
				<u-form :model="personalStep2" ref="uForm">
					<u-form-item :label="$t('storeManagement.ShopAvatar')" labelPosition="top">
						<u-avatar :src="$u.file.getMedieUrl(personalStep2.shopAvatarUrl)" mode="square" size="200" @click="changeAvatar"></u-avatar>
					</u-form-item>
				</u-form>
				<titleInput v-model="personalStep2.shopName" :maxlength="48" focusColor="#2934D0" :title="$t('storeManagement.StoreName')"></titleInput>
				<titleInput v-model="personalStep2.profile" focusColor="#2934D0" :title="$t('storeManagement.ShopProfile')"></titleInput>
				<titleInput v-model="personalStep2.intro" focusColor="#2934D0" :title="$t('storeManagement.ShopIntroduction')"></titleInput>
				<titleInput v-model="personalStep2.shopAddress" focusColor="#2934D0" :title="$t('storeManagement.BusinessAddress')"></titleInput>
				<!-- 工作类型 -->
				<!-- <view class="">
					<view class="">
						{{ $t('storeManagement.BusinessType') }}
					</view>
					<view class="scenarioList">
						<view
							class="scenarioItem"
							:class="personalStep2.businessType == index + 1 ? 'choosedcss' : ''"
							v-for="(item,index) in businessTypeList"
							:key="index"
							@click="chooseBusinessType(index, item)"
						>
							{{ item }}
						</view>
					</view>
				</view> -->
				<!-- 工作场景 -->
				<view class="">
					<view class="">
						{{ $t('storeManagement.workingScenario') }}
					</view>
					<view class="scenarioList">
						<view
							class="scenarioItem"
							:class="personalStep2.workScene == index + 1 ? 'choosedcss' : ''"
							v-for="(item, index) in scenarioList"
							:key="index"
							@click="chooseScenario(index, item)"
						>
							{{ item }}
						</view>
					</view>
				</view>
			</view>

			<view class="bootom">
				<u-button @click="modifyClick" type="primary">
					{{ $t('storeManagement.Completed') }}
				</u-button>
			</view>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {
			businessTypeList: ['Personal', 'Partner', 'Flagship', 'Enterprise'],
			//搜索
			search: {
				navThmen: 'line',
				navPlaceholder: 'Donate for',
				navType: 'navBackTitle',
				title: this.$t('storeManagement.StoreInformation')
			},

			scenarioList: [this.$t('storeManagement.homeOffice'), this.$t('storeManagement.smallStudio'), this.$t('storeManagement.company')],

			// 数据
			personalStep2: {
				shopName: '',
				shopAvatarUrl: '',
				profile: '',
				intro: '',
				shopAddress: '',
				workScene: null,
				
			},
			tempCount: 0,
			activeStoreType: 'Personal',
			region: '',
			latitude: '',
			longitude: ''
		};
	},
	onLoad() {},
	methods: {
		chooseScenario(index, item) {
			this.personalStep2.workScene = index + 1;
			this.personalStep2.workingScenario = item;
			// this.$forceUpdate();
		},
		
		goBack() {
			uni.navigateTo({
				url: '/pages/applyOpenShop/applyOpenShop'
			});
		},

		modifyClick() {
			// 判断是否填写完成
			let isAccomplishps2 = 1;
			for (let key in this.personalStep2) {
				if (!this.personalStep2[key]) {
					isAccomplishps2 = 0;
				}
			}

			uni.setStorageSync('personalStep2', JSON.stringify(this.personalStep2));
			uni.setStorageSync('isAccomplishps2', isAccomplishps2);
			uni.navigateTo({
				url: '/pages/applyOpenShop/applyOpenShop'
			});
		},
		changeAvatar() {
			this.$u.file.fileUpload('shop_img', 1, true).then((res) => {
				this.personalStep2.shopAvatarUrl = res.fileName;
			});
		},
		choiceAddress() {
			let _this = this;
			uni.chooseLocation({
				success(res) {
					console.log(res);
					_this.region = res.address;
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
				}
			});
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.personalStep2 = JSON.parse(uni.getStorageSync('personalStep2')) ? JSON.parse(uni.getStorageSync('personalStep2')) : this.personalStep2;
	}
};
</script>

<style lang="scss">
.modify-page {
	.input-box {
		margin-bottom: 40rpx;
	}
	/deep/ .title-input {
		margin: 40rpx 0;
	}
	.container-box {
		height: 80vh;
		overflow: auto;
		padding: 30rpx;
	}

	.bootom {
		position: absolute;
		bottom: 60rpx;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);

		.u-btn {
			padding: 30rpx;
		}
	}

	.p-b-6 {
		padding-bottom: 60rpx;
		width: 100%;
		margin-top: 48rpx;
		display: inline-block;
	}

	.uploaddiv {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		border-radius: 20rpx;
		opacity: 1;
		border: 1px solid #e8e6ea;
		height: 296rpx;
	}
}

// 店铺类型
.check-store-type {
	display: flex;
	margin-top: 50rpx;
	flex-wrap: wrap;

	.check-btn {
		width: 90px;
		height: 32px;
		background: #f5f6f8;
		border-radius: 10px 10px 10px 10px;
		line-height: 32px;
		font-size: 12px;
		margin: 20rpx;
		color: #c9c9c9;
		text-align: center;
		opacity: 1;

		&:not(:last-child) {
			margin-right: 20rpx;
		}

		&.is-active {
			color: #fff;
			background-color: #2935d0;
		}
	}
}
.scenarioList {
	display: flex;
	align-items: center;
	margin: 30rpx 0;
	flex-wrap: wrap;
}
.scenarioItem {
	display: flex;

	align-items: center;
	justify-content: center;
	padding: 20rpx;
	margin: 30rpx;
	background-color: #f5f5f3;
	border-radius: 16rpx;
	color: #c9c9c9;
}
/deep/.choosedcss {
	background-color: #2935d0 !important;
	color: #fff  !important;
}
</style>
